<template>
  <el-alert 
  :title="title"
  :type="type"
  :description="description"
  :closable="closable"
  :center="center"
  :show-icon="showIcon"
  @close="handleClose">
  <!-- 自定义标题 -->
  <template slot="title">
    <slot name="title"></slot>
  </template>
  <!-- 内容描述 -->
  <slot></slot>
  </el-alert>
</template>

<script setup lang="ts" name="vAlert">
import { defineProps, defineEmits } from 'vue';
import { ElAlert } from 'element-plus';
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '',
  },
  // 类型 'success' | 'warning' | 'info' | 'error'
  type: {
    type: String,
    default: 'info',
  },
  // 描述性文本
  description: {
    type: String,
    default: '',
  },
  // 是否可关闭
  closable: {
    type: Boolean,
    default: true,
  },
  // 是否居中
  center: {
    type: Boolean,
    default: false,
  },
  // 是否显示图标
  showIcon: {
    type: Boolean,
    default: true,
  }
})

const emits = defineEmits(['close'])

const handleClose = () => {
  emits('close')
}
</script>

<style scoped>
</style>
